<template>
    <div class="home">
        <div class="container">   
            <div class="top">
                <home-top></home-top>
                <top-nav></top-nav>
                <!-- 详情页吸顶组件 -->
                <details-ceiling></details-ceiling>
            </div>
        </div>
        <!-- 这是Home页 -->
        <transition name="slide-fade" mode="out-in">
            <router-view></router-view>
        </transition>
        <home-bottom></home-bottom>
    </div>
</template>

<script>
import detailsCeiling from "../components/detailsCeiling.vue"
import HomeBottom from '../components/HomeBottom.vue'
import HomeTop from '../components/HomeTop.vue'
import TopNav from '../components/TopNav.vue'
export default {
    components:{
        HomeBottom,
        HomeTop,
        TopNav,
        detailsCeiling
    }
}
</script>

<style lang="scss" scoped>
    .home {
        .container {
            height: 110px;
            @media (max-width: 768px) {
                height: 50px;
            }
            .top {
                width: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: 200;
            }
        }
    }

    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>